<template>
	
	 <el-dialog v-model="dialogVisible"
	  :title="dialogTitle"
	   :before-close="closeDialog"
		class="elDiaLog"
		lock-scroll width="1000px" 
		:close-on-click-modal="false" 
		:close-on-press-escape="false">
		<div class="form-box list-info" v-if="['edit_art','add_art'].includes(dialogStatus)" v-loading="loading2">
		<!-- {{props.cidArr}} -->
		
			<el-form  ref="dataFormRef" :model="formData" :rules="rules" label-width="150px">			
				<el-form-item required label="标题" prop="title">
					<el-input
					    v-model="formData.title"
					    placeholder="请输入标题"
					 />
				</el-form-item>
				<el-form-item required label="进度说明" prop="content">
					<el-input type="textarea" 
							  placeholder="请输入进度说明" 
							  resize="none" 
							  show-word-limit 
							  maxlength="200" 
							  rows="4"
							  v-model="formData.content" />
				</el-form-item>
				<el-form-item  label="附件" prop="files">
					<el-upload style="width: 100%;"
					    v-model:file-list="formData.files"
					    action="/api/upload" 
					    name="file"
					    :data="{type: 'file'}"
					    :on-success="(response:any, file:any, fileList:any) => {
					       return imageBeforUploadSuccess(response, file, fileList,'files');
					    }"
						:on-preview="onFilePreview"
					    :before-upload="imageBeforUpload"
					    :multiple="true"
					    list-type="text">
					    <el-button type="primary">上传附件</el-button>
					    <template #tip>
					        <div class="el-upload__tip">
								<el-text  size="small" type="info">文件大小:{{feilType.pageShow}} </el-text>
					        </div>
					    </template>
					</el-upload>
					
				</el-form-item>
				<el-form-item  label="进度日期" prop="date">
					<el-date-picker
					style="width: 100%;"
					        v-model="formData.date"
					        type="date"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
					        placeholder="请选择日期"
					      />
				</el-form-item>
				
			</el-form>
		</div>
		<div class="form-box" v-if="['detail_art'].includes(dialogStatus)" v-loading="loading2">
			<el-descriptions  size="default" :column="1" border>
				<el-descriptions-item label-class-name="labelC1" label="标题：">{{dataInfo.title}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1" label="进度说明：">{{dataInfo.content}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1" label="附件：">
					<div v-if="dataInfo.files?.length >0" v-for="(ite,ind) in dataInfo.files" >
						<el-link @click="onFilePreview(ite)" type="primary">{{ind + 1}}.{{ite.name}}</el-link>
					</div> 
					<el-link v-else type="info">无</el-link>
				 </el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1" label="进度日期：">{{dataInfo.date}}</el-descriptions-item>
			</el-descriptions>
		</div>
		<template #footer>
			<div class="dialog-footer">
				
				<el-button v-if="['detail_art'].includes(dialogStatus)" :disabled="loading3" @click="closeDialog">关
					闭</el-button>
				<el-button v-if="['edit_art','add_art'].includes(dialogStatus)" type="primary" :loading="loading3"
					@click="handleSubmit">{{dialogStatus == 'edit_art'?'修改':'确定'}}</el-button>
				<el-button v-if="['edit_art','add_art'].includes(dialogStatus)" :disabled="loading3"
					@click="closeDialog">取 消</el-button>

			</div>
		</template>

		
	</el-dialog>
	
	
</template>
<script setup lang="ts">
	import { useRoute } from 'vue-router';
	import _ from 'lodash-es'
	import { feilType,onFilePreview } from "@/utils/funcall"
	import { useBaseConfigStore } from "@/store/modules/baseConfig";
	const baseConfigStore = useBaseConfigStore();
	import {BUSINESS_TYPE} from "@/utils/constant";
	
	// 获取接口地址
	import {
		getLedgerSchedulelDetail,
		updataLedgerSchedule,
		addLedgerSchedule
	} from "@/api/aggravate";
	
	const props = defineProps({
		//数据列表索引值  例如 user ->对应着 vuex  == user_cxxxxx模块
	    dialogTitle: {
	        type: String,
	        default:"添加信息"
	    },
		dialogStatus: {
			type: String,
			default: "add_art"
		},
		dialogTableValue:{
		  type:Object,
		  default: ()=>{},
		},
		cidArr:{
		  type:Object,
		  default: ()=>{},
		},
	});

	const emit = defineEmits(['update:modelValue','initRefreshList']);
	const dialogVisible = ref(false);
	const loading2 = ref(false);//新增或者修改加载load按钮
	const loading3 = ref(false);//新增或者修改加载load按钮
	// 数据的data-ref
	const dataFormRef = ref(ElForm);
	const formData = ref<any>({
		id:undefined,
		ledger_id:undefined,
		title:"",
		content:"",
		files:[],
		date:""
	})
	const dataInfo =ref<any>({});
	
	const rules = reactive<any>({
		title:[{ required: true, message: '请输入标题', trigger: 'blur' }],
		content:[{ required: true, message: '请输入进度说明', trigger: 'blur' }],
	})
	
	watch(
		()=>props.dialogTableValue,
		()=>{
			if (props.dialogStatus == "detail_art") {
				console.log('查看详情')
				let deepItem = _.cloneDeep(props.dialogTableValue)
				getAuditDetail(deepItem);
			}
			else if (props.dialogStatus == "edit_art"){
				 let deepItem = _.cloneDeep(props.dialogTableValue)
				 getAuditDetail(deepItem); 
			}
			else
			{
				console.log('添加信息')
			}
	},{deep:true,immediate:true})
	
	
	// users: [{ required: true, message: '请选择审批人', trigger: 'blur' }],
	// 提交新增内容/or修改
	function handleSubmit() {
		dataFormRef.value.validate((valid : boolean) => {
			console.log(valid)
			if (valid) {
				loading3.value = true;
				if(formData.value.id)
				{
					updataLedgerSchedule(formData.value).then((res) => {
						console.log(res)
						emit('initRefreshList');
						loading3.value = false;
						ElMessage({ message: '修改成功', type: 'success' })
						closeDialog();
					}).finally(() => {
						loading3.value = false;
					})
				}
				else
				{
					addLedgerSchedule(formData.value).then((res) => {
						console.log(res)
						emit('initRefreshList');
						loading3.value = false;
						ElMessage({ message: '添加成功', type: 'success' })
						closeDialog();
					}).finally(() => {
						loading3.value = false;
					})
					
				}
			}
		});
	}
	// 关闭弹窗
	function closeDialog() {
		 if (!loading3.value) {
			emit('update:modelValue',false)
		 }
	}
	/**
	 * 上传文件 之前的操作
	 */
	function imageBeforUpload(file : any) {
		var fileSize = file.size / 1024 / 1024 < feilType.size;
		const index = file.name.lastIndexOf(".");
		const ext = file.name.substr(index + 1).toUpperCase();
		if (feilType.extarr.indexOf(ext) == -1) {
			ElMessage({
				message: feilType.errorMes,
				type: 'error',
			})
			return false;
		}
		if (!fileSize) {
			ElMessage({
				message: feilType.prompt,
				type: 'error',
			})
			return false;
		}
	}
	// 图片和文件类型上传成功之后的回调
	function imageBeforUploadSuccess(response : any, file : any, fileList : any, el : any) {
		console.log(response, file, fileList, el)
		formData.value[el] = formData.value[el].map(item => {
			if (item.uid == file.uid) {
				const obj : any = {}
				obj.uid = file.uid
				obj.url = response.data.url
				obj.name = file.name
				return obj;
			}
			else {
				return item;
			}
		});
	}
	// 获取详情
	function getAuditDetail(row){
		loading2.value = true;
		getLedgerSchedulelDetail({id:row.id}).then((res) => {
			console.log(res)
			let data = res.data;
			formData.value.id = data.id;
			formData.value.title = data.title;
			formData.value.content =  data.content;
			formData.value.files =  data.files;
			formData.value.date =  data.date;
			dataInfo.value = res.data;
		}).finally(() => {
			loading2.value = false;
		})
	}
	onMounted(() => {
		formData.value.ledger_id=props.cidArr.id
	});
</script>

<style lang="scss" scoped>

</style>